<template>
    <div class="pagetop">
        <div class="pagetop-left">
            <a href="/">首页</a>
            <span>></span>
            <a :href="data.href1">{{data.tag1}}</a>
            <span v-show="data.href2">> </span>
            <a :href="data.href2">{{data.tag2}}</a>
        </div>
        <div class="pagetop-right">
            <input type="text" v-model="value " placeholder="请输入..." class="pagetop-value"/>
            <button class="pagetop-btn"></button>
            <ul v-show="resultList.length" class="pagetop-right-items">
                <li v-for="item of resultList" :key="item.id" class="pagetop-right-item">
                    <a :href="'/webpage/articles/' + item.id">{{item.title}}</a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
	export default {
		name: "PageTop",
        props:['data'],
        data(){
		    return {
		    	value:'',
			    resultList:[],
            }
        },
        mounted(){
		    window.addEventListener('click',e=>{
                this.resultList = [];
                this.value = '';
            });
        },
        methods:{
			async find(){
				if(this.value){
					let result = await this.$searchArticle({searchValue:this.value});
					this.resultList = result.data.map(item=>{
						return {
							title:item.title,
                            id:item.id
                        }
                    });
                }else{
					this.resultList = [];
                }
            }
        },
        watch:{
			value(){
				this.find();
            }
        }
	}
</script>

<style scoped>
    .pagetop{
        padding:10px;
        background-color: #fff;
        margin-bottom: 10px;
        font-size: 15px;
        color: #555;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    .pagetop a{
        color: #555;
        text-decoration: none;
        transition: color .5s;
    }
    .pagetop a:hover{
        color:#DE852C;
    }
    .pagetop-right{
        position: relative;
    }
    .pagetop-value{
        outline: none;
        border: 1px solid #B7B7B7;
        line-height: 26px;
        width: 200px;
        font-size: 13px;
        text-indent: 1em;
        border-radius: 13px;
        color:#B7B7B7;
    }
    .pagetop-value:focus{
        border: 1px solid #555;
        color:#555;
    }
    .pagetop-btn{
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        outline: none;
        border: none;
        width: 26px;
        height: 26px;
        background-color: transparent;
        background: url("@/static/icons/search.png") no-repeat center/ 26px 26px;
    }
    .pagetop-right-items{
        position: absolute;
        z-index: 99;
        top:30px;
        width: 200px;
        background-color: #fff;
        font-size: 13px;
        box-shadow: 0 0 5px #C3C3C4;
    }
    .pagetop-right-items a{
        display: block;
        width: 100%;
    }
    .pagetop-right-item{
        line-height: 30px;
        text-indent: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-bottom:1px solid #E3E6E7;
    }
    .pagetop-right-item:hover{
        background-color: #FFA400;
    }
    .pagetop-right-item:hover a{
        color: #fff;
    }
    @media screen and (max-width: 750px){
        .pagetop{
            justify-content: center;
            margin-bottom: 5px;
        }
        .pagetop > h3{
            font-size: 16px;
        }
        .pagetop-left{
            display: none;
        }
    }
</style>